<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>大量跳动的爱心</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #000;
            overflow: hidden;
        }

       .heart {
            position: absolute;
            width: var(--heart-size);
            height: var(--heart-size);
            background-color: currentColor;
            transform: rotate(-45deg);
            animation: heartbeat 1.5s infinite ease-in-out alternate;
            animation-delay: var(--animation-delay);
        }

       .heart::before,
       .heart::after {
            content: "";
            position: absolute;
            width: var(--heart-size);
            height: var(--heart-size);
            background-color: currentColor;
            border-radius: 50%;
        }

       .heart::before {
            top: calc(var(--heart-size) * -0.5);
            left: 0;
        }

       .heart::after {
            left: calc(var(--heart-size) * 0.5);
            top: 0;
        }

        @keyframes heartbeat {
            0% {
                transform: rotate(-45deg) scale(1);
                box-shadow: 0 0 10px currentColor;
            }
            100% {
                transform: rotate(-45deg) scale(1.1);
                box-shadow: 0 0 30px currentColor;
            }
        }

       .sparkle {
            position: absolute;
            width: 3px;
            height: 3px;
            background-color: #fff;
            border-radius: 50%;
            opacity: 0;
            animation: sparkle 1.5s infinite ease-in-out;
            animation-delay: var(--sparkle-delay);
        }

        @keyframes sparkle {
            0% {
                opacity: 0;
                transform: scale(0);
            }
            50% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(0);
            }
        }
    </style>
</head>

<body>
    <script>
        const numHearts = 100;
        const colors = ['#ff69b4', '#ff1493', '#ffb6c1', '#ff00ff', '#c71585', '#db7093', '#ff8c00', '#da70d6'];

        for (let i = 0; i < numHearts; i++) {
            const heart = document.createElement('div');
            heart.classList.add('heart');
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            const randomSize = Math.floor(Math.random() * 50) + 20;
            const randomDelay = Math.random() * 2;

            heart.style.setProperty('--heart-size', `${randomSize}px`);
            heart.style.setProperty('--animation-delay', `${randomDelay}s`);
            heart.style.color = randomColor;
            heart.style.left = Math.random() * window.innerWidth + 'px';
            heart.style.top = Math.random() * window.innerHeight + 'px';

            document.body.appendChild(heart);

            for (let j = 0; j < 5; j++) {
                const sparkle = document.createElement('div');
                sparkle.classList.add('sparkle');
                const sparkleDelay = Math.random() * 1.5;
                sparkle.style.setProperty('--sparkle-delay', `${sparkleDelay}s`);
                sparkle.style.top = Math.random() * 100 + '%';
                sparkle.style.left = Math.random() * 100 + '%';
                heart.appendChild(sparkle);
            }
        }
    </script>
</body>

</html>